<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>协办</title>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./element.css" />
    <style>
      #teamwork {
        height: 100%;
        background-color: #f5f5f5;
      }
      .content {
        /* padding-bottom: 100px; */
      }
    </style>
  </head>

  <body>
    <div id="teamwork">
      <div>
        <van-nav-bar title="协办" left-arrow @click-left="onClickLeft" />
      </div>

      <div style="padding: 10px">
        <div style="background-color: #fff; padding: 0 px; border-radius: 5px">
          <div>
            <van-cell title="协办人员">
              <template #right-icon>
                <van-icon
                  name="plus"
                  style="line-height: 24px"
                  @click="actionsheetshow = true"
                />
              </template>
            </van-cell>
          </div>
        </div>
      </div>
      <div style="padding: 10px">
        <div style="background-color: #fff; padding: 10px; border-radius: 5px">
          <div style="font-size: 14px; color: #323233">审批意见</div>
          <div>
            <van-field
              v-model="textValue"
              rows="3"
              autosize
              type="textarea"
              placeholder="请输入"
              style="padding: 0"
            />
          </div>

          <div>
            <van-cell style="padding: 0">
              <template #title>
                <van-button
                  plain
                  type="danger"
                  style="height: 20px"
                  @click="setCommon"
                  :disabled="!textValue"
                  >设为常用</van-button
                >
              </template>
              <template #right-icon>
                <van-uploader v-model="fileList" multiple>
                  <van-icon name="link-o" /><span>附件</span>
                </van-uploader>
              </template>
            </van-cell>
          </div>
        </div>
      </div>
      <div style="padding: 10px">
        <div style="background-color: #fff; padding: 10px; border-radius: 5px">
          <div>常用意见</div>
          <div style="margin: 10px 0">
            <el-select
              v-model="selectValue"
              placeholder="请选择"
              style="width: 100%"
              @change="onSelectChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <van-button
              type="danger"
              style="height: 20px"
              @click="deleteCommon"
              :disabled="!selectId"
              >删除</van-button
            >
          </div>
        </div>
      </div>
      <div
        style="
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 15px;
          background-color: white;
          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
          z-index: 1000;
        "
      >
        <van-button type="danger" block @click="onSubmit"> 同意</van-button>
      </div>
      <van-action-sheet v-model="actionsheetshow" title="标题">
        <div class="content">
          <div>
            <van-search
              v-model="searchValue"
              placeholder="请输入搜索关键词"
              @search="onSearch"
              @cancel="onSearch"
              shape="round"
            />
          </div>

          <div
            style="height: 6px; width: 100%; background-color: #f5f5f5"
          ></div>
          <div style="padding: 12px">
            <div>联系人</div>
            <div
              style="
                max-height: 300px;
                overflow-y: auto;
                overflow-x: hidden;
                margin-bottom: 20px;
              "
            >
              <div style="padding: 12px">
                <div v-for="item in dataList" :key="item.id">
                  <div style="display: flex; gap: 20px">
                    <div>
                      <image
                        :src="item.URL"
                        style="border-radius: 50%; width: 36px; height: 36px"
                      />
                    </div>
                    <div
                      style="
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        flex: 1;
                        border-bottom: 1px solid #000;
                        padding-bottom: 6px;
                        margin-bottom: 6px;
                      "
                    >
                      <div>
                        <div>{{item.name}}</div>
                        <div>{{item.position}}</div>
                      </div>
                      <div>
                        <van-checkbox
                          v-model="item.checked"
                          checked-color="#F04438"
                          @change="handleChange(item)"
                        ></van-checkbox>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <van-button type="primary">确定</van-button>
              <van-button type="danger">取消</van-button>
            </div>
          </div>
        </div>
      </van-action-sheet>
    </div>
  </body>
  <script src="./vue.min.js"></script>
  <script src="./vant.min.js"></script>
  <script src="./element.js"></script>
  <script>
    var teamwork = new Vue({
      el: "#teamwork",
      data() {
        return {
          searchValue: "",
          fileList: [],
          textValue: "",
          actionsheetshow: false,
          options: [
            {
              value: "选项1",
              label: "黄金糕",
            },
            {
              value: "选项2",
              label: "双皮奶",
            },
            {
              value: "选项3",
              label: "蚵仔煎",
            },
            {
              value: "选项4",
              label: "龙须面",
            },
            {
              value: "选项5",
              label: "北京烤鸭",
            },
          ],
          value: "",
          selectValue: "",
          selectId: "",
          dataList: [
            {
              id: 1,
              name: "吴**",
              position: "销售A组组长",
              URL: "https://img01.yzcdn.cn/vant/cat.jpeg",
              checked: false, // 是否选中 得到数据后给接口都加上
            },
            {
              id: 2,
              name: "王**",
              position: "销售A组组员",
              URL: "https://img01.yzcdn.cn/vant/cat.jpeg",
              checked: false, // 是否选中 得到数据后给接口都加上
            },
            {
              id: 3,
              name: "赵**",
              position: "销售A组组员",
              URL: "https://img01.yzcdn.cn/vant/cat.jpeg",
              checked: false, // 是否选中 得到数据后给接口都加上
            },
            {
              id: 4,
              name: "孙**",
              position: "销售A组组员",
              URL: "https://img01.yzcdn.cn/vant/cat.jpeg",
              checked: false, // 是否选中 得到数据后给接口都加上
            },
            {
              id: 5,
              name: "李**",
              position: "销售A组组员",
              URL: "https://img01.yzcdn.cn/vant/cat.jpeg",
              checked: false, // 是否选中 得到数据后给接口都加上
            },
            {
              id: 6,
              name: "张**",
              position: "销售A组组员",
              URL: "https://img01.yzcdn.cn/vant/cat.jpeg",
              checked: false, // 是否选中 得到数据后给接口都加上
            },
          ],
        };
      },
      computed: {},
      created() {},
      mounted() {},
      methods: {
        onClickLeft() {
          console.log("点击了返回");
          window.history.back();
        },
        setCommon() {
          console.log(this.textValue, "设为常用", "调接口");
          this.textValue = "";
        },
        deleteCommon() {
          console.log(this.selectId, "删除常用");
          this.textValue = "";
          this.selectId = "";
          console.log("重新请求接口");
        },
        onSelectChange(selectedValue) {
          console.log(selectedValue, "111");
          console.log(this.selectValue, "选择了常用意见");
          const item = this.options.find((opt) => opt.value === selectedValue);
          console.log("当前选中项完整对象：", item);
          this.selectId = item.value;
          if (this.textValue) {
            this.textValue = this.textValue + "\n " + item.label;
          } else {
            this.textValue = item.label;
          }
          console.log(this.textValue);
        },
        onSubmit() {
          console.log(this.textValue, "同意");
        },
        onSearch() {
          console.log(this.searchValue, "搜索调接口赋值");
        },
        handleChange(item) {
          console.log(item, "点击了复选框");
        },
      },
    });
  </script>
</html>
